import {messages} from 'share/common';
import React from 'react';
import {
  Card, Col, Popover, Badge, Radio, Button, Icon
} from 'antd';
import moment from 'moment';
import NewConsumerServer from '../new-consumer-management/new-consumer-server';

export default {

  exportErrorColumns() {
    return [
      {
        title: messages('supplier.key440')/* 行号 */, dataIndex: 'rowNum', key: 'rowNum', width: '13%'
      },
      {
        title: messages('supplier.key285')/* 公司名称 */, dataIndex: 'companyName', key: 'companyName', width: '25%'
      },
      {title: messages('supplier.key441')/* 错误信息 */, dataIndex: 'error', key: 'error'},
    ];
  },

  getNewOpenConsumerColumns(supplier) {
    switch (supplier) {
      case 'meiya':
        return [
          {
            title: messages('components.key17'/* 公司代码 */),
            dataIndex: 'companyCode',
            key: 'companyCode',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: messages('components.key18'/* 公司名称 */),
            dataIndex: 'companyName',
            key: 'companyName',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: messages('supplier.key288')/* 美亚公司ID */,
            dataIndex: 'corpVendorsId',
            key: 'corpVendorsId'
          },
          {
            title: messages('supplier.key289')/* 渠道号 */,
            dataIndex: 'channel',
            key: 'channel'
          },
          {
            title: messages('supplier.key290')/* H5 Key */,
            dataIndex: 'vendorH5Key',
            key: 'vendorH5Key',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: 'Web Key',
            dataIndex: 'vendorKey',
            key: 'vendorKey',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: messages('supplier.key442')/* 消费服务 */,
            dataIndex: 'openType',
            key: 'openType',
            render: (value) => {
              const show = value;
              return show
                ? show
                  .replace('AIR', messages('supplier.key443')/* 机票 */)
                  .replace('HOTEL', messages('supplier.key444')/* 酒店 */)
                : '';
            }
          },
          {
            title: messages('setting.key289'/* 状态 */),
            dataIndex: 'status',
            key: 'status',
            render: (value) => {
              switch (value) {
                case 0: return <Badge status="default" text={messages('supplier.key445')/* 未配置 */} />;
                case -1: return <Badge status="error" text={messages('common.status.disable')/* 禁用 */} />;
                case 1: return <Badge status="success" text={messages('common.status.enable')/* 启用 */} />;
                default: return <Badge status="default" text={messages('supplier.key445')/* 未配置 */} />;
              }
            }
          },
          {
            title: messages('common.operation'/* 操作 */),
            dataIndex: 'operator',
            key: 'operator',
            render: () => <a>{messages('common.edit')/* 编辑 */}</a>
          },
        ];
      case 'ctrip':
        return [
          {
            title: messages('components.key17'/* 公司代码 */),
            dataIndex: 'companyCode',
            key: 'companyCode',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: messages('components.key18'/* 公司名称 */),
            dataIndex: 'companyName',
            key: 'companyName',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: messages('supplier.key481')/* 携程账户类型 */,
            dataIndex: 'isBigCus',
            key: 'isBigCus',
            render: (value) => {
              switch (value) {
                case 0: return '-';
                case -1: return messages('supplier.key486')/* 携程小客户 */;
                case 1: return messages('supplier.key485')/* 携程大客户 */;
                default: return '-';
              }
            }
          },
          {
            title: 'App Key',
            dataIndex: 'appKey',
            key: 'appKey'
          },
          {
            title: 'App Secret',
            dataIndex: 'appSecurity',
            key: 'appSecurity'
          },
          {
            title: 'Account ID',
            dataIndex: 'accountID',
            key: 'accountID'
          },
          {
            title: messages('setting.key289'/* 状态 */),
            dataIndex: 'status',
            key: 'status',
            render: (value) => {
              switch (value) {
                case 0: return <Badge status="default" text={messages('supplier.key445')/* 未配置 */} />;
                case -1: return <Badge status="error" text={messages('common.status.disable')/* 禁用 */} />;
                case 1: return <Badge status="success" text={messages('common.status.enable')/* 启用 */} />;
                default: return <Badge status="default" text={messages('supplier.key445')/* 未配置 */} />;
              }
            }
          },
          {
            title: messages('common.operation'/* 操作 */),
            dataIndex: 'operator',
            key: 'operator',
            render: () => <a>{messages('common.edit')/* 编辑 */}</a>
          }
        ];
      case 'didi':
        return [
          {
            title: messages('components.key17'/* 公司代码 */),
            dataIndex: 'companyCode',
            key: 'companyCode',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: messages('components.key18'/* 公司名称 */),
            dataIndex: 'companyName',
            key: 'companyName',
            render: (value) => (
              <Popover placement="topLeft" content={value}>
                <span>{value}</span>
              </Popover>
            )
          },
          {
            title: messages('supplier.key565')/* 滴滴company ID */,
            dataIndex: 'companyId',
            key: 'companyId'
          },
          {
            title: messages('setting.key289'/* 状态 */),
            dataIndex: 'enable',
            key: 'enable',
            render: (value) => {
              switch (value) {
                case 0: return <Badge status="default" text={messages('supplier.key445')/* 未配置 */} />;
                case -1: return <Badge status="error" text={messages('common.status.disable')/* 禁用 */} />;
                case 1: return <Badge status="success" text={messages('common.status.enable')/* 启用 */} />;
                default: return <Badge status="default" text={messages('supplier.key445')/* 未配置 */} />;
              }
            }
          },
          {
            title: messages('common.operation'/* 操作 */),
            dataIndex: 'operator',
            key: 'operator',
            render: () => <a>{messages('common.edit')/* 编辑 */}</a>
          }
        ];
      default:
        return [];
    }
  },

  newOpenConsumerSearchForm() {
    return [
      {
        type: 'input',
        id: 'key',
        label: messages('supplier.key447')/* 公司代码/名称 */,
      },
    ];
  },

  renderOpenVendorsList(context) {
    const { openVendorsList } = context.state;
    return openVendorsList.map((item, index) => (
      <Col xs={8} sm={8} md={8} lg={8} xl={8} xxl={6} className="card-style" key={item.id}>
        <Card style={{width: '100%', height: '100%'}}>
          <div className="supplier-name">{item.cnVendorsName}</div>
          <div className="icon">
            <img src={item.imgUrl} alt="" />
            <div className="hover-content">
              <div className="hover-icon">
                {item.enVendorsProfile && <img src={item.enVendorsProfile[0]} alt="" />}

              </div>
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[1]}</div>}
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[2]}</div>}
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[3]}</div>}
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[4]}</div>}
              <div className="hover-button" onClick={() => context.handleToControl(item)}>{messages('supplier.key86'/* 进入控制台 */)}</div>
            </div>
          </div>
          <div className="little-tips">
            {item.vendorsLabel && item.vendorsLabel.map((item, index) => (
              <span className="tips-item" key={index}>{item}</span>
            ))}

          </div>
        </Card>
      </Col>
    ));
  },

  renderNotopenVendorsList(context) {
    const { notOpenVendorsList } = context.state;
    return notOpenVendorsList.map((item, index) => (
      <Col xs={8} sm={8} md={8} lg={8} xl={8} xxl={6} className="card-style" key={item.id}>
        <Card>
          <div className="supplier-name">{item.cnVendorsName}</div>
          <div className="icon">
            <img src={item.imgUrl} alt="" />
            <div className="hover-content">
              <div className="hover-icon">
                <img src={item.enVendorsProfile ? item.enVendorsProfile[0] : ''} alt="" />
              </div>
              <div className="hover-text no-open-hover-text">{item.enVendorsProfile ? item.enVendorsProfile[1] : ''}</div>
              <div className="hover-button" onClick={() => context.handleToEnable(item)}>
                {messages('supplier.key87'/* 立即开通 */)}

              </div>
            </div>
          </div>
          <div className="little-tips">
            {item.vendorsLabel && item.vendorsLabel.map((item, index) => (
              <span className="tips-item" key={index}>{item}</span>
            ))}
          </div>
        </Card>
      </Col>
    ));
  },

  getTipMessage(supplierName) {
    const data = {
      serviceId: '',
      title: '',
      confirmContent: '',
    };
    switch (supplierName) {
      case 'didi': {
        data.serviceId = ['1001'];
        data.title = (<div>{messages('supplier.key124'/* 关闭滴滴服务，关闭后可重新启用该服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key126'/* 不能在汇联易中使用滴滴服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key127'/* 不能开具个人垫付发票 */)}
            </div>
            <div>
              3.
              {messages('supplier.key128'/* 重新启用后需重新设置配置 */)}
            </div>
          </div>
        );
        break;
      }
      case 'ctrip': {
        data.serviceId = ['1002', '10011', '10012', '1010'];
        data.title = (<div>{messages('supplier.key129'/* 关闭携程服务，关闭后可重新启用该服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key130'/* 不能在汇联易中使用携程服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key131'/* 重新启用后需重新设置配置 */)}
            </div>
          </div>
        );
        break;
      }
      case 'CMBC': {
        data.serviceId = ['20001'];
        data.title = (<div>{messages('supplier.key132'/* 关闭招行商务卡服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              1.
              {messages('supplier.key133'/* 关闭后不能在汇联易中使用招行商务卡服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key134'/* 重新启用后，原配置信息仍有效 */)}
            </div>
          </div>
        );
        break;
      }
      case 'eleme': {
        data.serviceId = ['vendor.eleme'];
        data.title = (<div>{messages('supplier.key135'/* 关闭饿了么服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key136'/* 不能在汇联易中使用饿了么服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key137'/* 不能获取饿了么费用 */)}
            </div>
          </div>
        );
        break;
      }
      case 'yget': {
        data.serviceId = ['vendor.esmart'];
        data.title = (<div>{messages('supplier.key138'/* 关闭油卡话费服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key139'/* 不能在汇联易中使用油卡话费服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key140'/* 不能获取油卡话费费用 */)}
            </div>
          </div>
        );
        break;
      }
      case 'hrs': {
        data.serviceId = ['vendor.hrs'];
        data.itle = (<div>{messages('supplier.key141'/* 关闭HRS服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key142'/* 不能在汇联易中使用HRS服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key143'/* 不能获取HRS费用 */)}
            </div>
          </div>
        );
        break;
      }
      case 'best': {
        data.serviceId = ['1003'];
        data.title = (<div>{messages('supplier.key144'/* 关闭百动服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key145'/* 不能在汇联易中使用场馆预定服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key146'/* 不能获取场馆预订费用 */)}
            </div>
          </div>
        );
        break;
      }
      case 'jd': {
        data.serviceId = ['1009'];
        data.title = (<div>{messages('supplier.key147'/* 关闭京东服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key148'/* 不能在汇联易中使用京东服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key149'/* 不能开具发票 */)}
            </div>
          </div>
        );
        break;
      }
      case 'tongcheng': {
        data.serviceId = ['1004'];
        data.title = (<div>{messages('supplier.key150'/* 关闭同程服务 */)}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}}>
            <div>
              {messages('supplier.key125'/* 关闭后会产生如下影响 */)}
              :
            </div>
            <div>
              1.
              {messages('supplier.key151'/* 不能在汇联易中使用同程火车 */)}
            </div>
            <div>
              2.
              {messages('supplier.key152'/* 不能获取同程火车费用 */)}
            </div>
            <div>
              3.
              {messages('supplier.key153'/* 关闭后会重置已设置项 */)}
            </div>
          </div>
        );
        break;
      }
      case 'heliosHotel': {
        data.serviceId = ['1088'];
        data.title = (<div>{messages('supplier.key214')/* 关闭甄选酒店 */}</div>);
        data.confirmContent = (
          <div style={{color: 'red', fontSize: '12px'}} />
        );
        break;
      }
      default:
        break;
    }
    return data;
  },

  getOtherEmployeeSetting(context, type) {
    const {isEdit} = context.state;
    const {rankName} = context.state;
    const onEdit = () => context.setState({isEdit: true});
    const onChange = (e) => context.setState({rankName: e.target.value});
    const onCancel = () => context.setState({isEdit: false});
    return (
      <li key="async">
        {messages('supplier.key473')/* 人员职级 */}
        ：
        {isEdit ? (
          <span>
            <Radio.Group value={rankName} onChange={onChange}>
              <Radio value="false">{messages('supplier.key488')/* 不同步 */}</Radio>
              <Radio value="true">{messages('supplier.key489')/* 同步 */}</Radio>
            </Radio.Group>
            (
            {messages('supplier.key490')/* 职级同步仅支持携程大客户，同步前请确保已在携程维护职级列表 */}
            )
            &nbsp;&nbsp;
            <Button type="primary" size="small" onClick={context.saveEmployeeSynConfig}>{messages('common.save')/* 保存 */}</Button>
            <Button size="small" onClick={onCancel} style={{marginLeft: 10}}>{messages('common.cancel')/* 取消 */}</Button>
          </span>
        ) : (
          <span>
            {rankName === 'true' ? messages('supplier.key489')/* 同步 */ : messages('supplier.key488')/* 不同步 */}
            <Icon
              type="edit"
              className="default-color-font"
              style={{cursor: 'pointer', marginLeft: 6}}
              onClick={onEdit}
            />
          </span>
        )}
      </li>
    );
  },

  getOtherDepSetting(context, type) {
    const isEdit = context.state.isDepEdit;
    const {depData} = context.state;
    const {tempDepConfig} = context.state;
    const {syncDepData} = context.state;
    const onEdit = () => context.setState({isDepEdit: true});
    const onChange = (e) => context.setState({tempDepConfig: e.target.value});
    const onCancel = () => context.setState({isDepEdit: false});
    return (
      <div className="consumer-other-setting-card-container">
        <h3>{messages('supplier.key566')/* 部门同步 */}</h3>
        <ul>
          <li key="data">
            {messages('supplier.key567')/* 部门数据 */}
            ：
            {isEdit ? (
              <span>
                <Radio.Group value={tempDepConfig} onChange={onChange}>
                  <Radio value="false">{messages('supplier.key488')/* 不同步 */}</Radio>
                  <Radio value="true">{messages('supplier.key489')/* 同步 */}</Radio>
                </Radio.Group>
                &nbsp;&nbsp;
                <Button type="primary" size="small" onClick={() => context.saveDepSynConfig(tempDepConfig)}>{messages('common.save')/* 保存 */}</Button>
                <Button size="small" onClick={onCancel} style={{marginLeft: 10}}>{messages('common.cancel')/* 取消 */}</Button>
              </span>
            ) : (
              <span>
                {depData === 'true' ? messages('supplier.key489')/* 同步 */ : messages('supplier.key488')/* 不同步 */}
                <Icon
                  type="edit"
                  className="default-color-font"
                  style={{cursor: 'pointer', marginLeft: 6}}
                  onClick={onEdit}
                />
              </span>
            )}
          </li>
          {
            !!(depData === 'true') && (
              <li key="async">
                {' '}
                {messages('supplier.key296')/* 点击 */}
&nbsp;
                <a onClick={context.onSyncDepData}>{messages('supplier.key568')/* 同步部门数据 */}</a>
                &nbsp;
                {messages('supplier.key569')/* 可手工同步部门增量，同步需要时间，可先处理其他事物，之后回到该页面刷新结果 */}
              </li>
            )
          }
          {
            !!(depData === 'true') && (
              <li key="refresh">
                {' '}
                {messages('supplier.key296')/* 点击 */}
&nbsp;
                <a onClick={context.updateSyncDepData}>{messages('supplier.key299')/* 刷新 */}</a>
                &nbsp;
                {messages('supplier.key300')/* 可获取最近一次同步结果 */}
                ：
                {
                  syncDepData.batch ? (
                    <span>
                      <sapn style={{ color: '#000' }}>
                        {moment(new Date(parseInt(syncDepData.batch))).format('YYYY-MM-DD HH:mm')}
                        {`共同步完成${syncDepData.errorTotal + syncDepData.successTotal}个，其中成功${syncDepData.successTotal}个`}
                        ，
                        {' '}
                        {messages('supplier.key113')/* 失败 */}
                        {context.failText(syncDepData)}
                        {' '}
                        {messages('supplier.key590')/* 个 */}
                      </sapn>
                      {messages('supplier.key296')/* 点击 */}
&nbsp;
                      <a onClick={context.downloadFailSyncDepData}>
                        {messages('supplier.key570')/* 下载同步失败部门信息 */}
                      </a>
                    </span>
                  ) : messages('supplier.key446')/* 暂无同步结果 */
                }
              </li>
            )
          }
        </ul>
      </div>
    );
  },

  getDidiSetting(context, type) {
    return (
      <div className="consumer-other-setting-card-container">
        <h3>{messages('supplier.key571')/* 滴滴设置 */}</h3>
        <ul>
          <li key="invoice">
            <span dangerouslySetInnerHTML={{__html: messages('supplier.key572'/* 维护开票的抬头信息，点击<a onclick="window.open('https://es.xiaojukeji.com/platform/invoice/title', '_blank')">新增开票资质</a> */)}} />
          </li>
          <li key="other">
            <span dangerouslySetInnerHTML={{__html: messages('supplier.key573'/* 其他滴滴设置请前往<a onclick="window.open('https://es.didichuxing.com/', '_blank')">滴滴企业平台</a>进行配置 */)}} />
          </li>
        </ul>
      </div>
    );
  }
};
